<template>
  <div>
    <zss-headermenu></zss-headermenu>
  
    <div style="margin-bottom:10px;position:relative">
      <p class="zss_p">手动扣分</p>
      <Input v-model="value4" icon="ios-search" placeholder="请输入规则名称" style="width: 200px"></Input>
      <Button type="primary" @click="sousuo" style="padding:4px 15px">搜索</Button>
      <Button type="success" @click="xinzeng" style="position:fixed;top:69px;right:20px">新增</Button>
    </div>

    <div class="zss_guize">
      <!-- 加载进度圈开始 -->
      <Spin size="large" fix v-if="spinShow"></Spin>
      <!-- 加载进度圈结束 -->
      <Table border :row-class-name="zssrowclass" ref="selection" :columns="columns4" :data="guize"></Table>
    </div>

    <Modal v-model="bjfs" title="编辑">
      <p class="zss_bjp">
        规则名称：
        <Input v-model="valueinput" autofocus style="width: 200px"></Input>
      </p> 
      <p class="zss_bjp">
        扣除分数：
        <input class="zss_numberinput" v-model="fsvalue" style="width: 200px" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></input>
      </p>
      <!-- <p class="zss_bjp">
        具体内容：
        <Input v-model="jtnr" autofocus style="width: 200px"></Input>
      </p> -->
      <p class="zss_bjp">
        <p style="text-indent:9.5em;display:inline-block">备注：</p>
        <Input v-model="bjbz" type="textarea" :autosize="{minRows: 2,maxRows: 10}" placeholder="请输入..." style="width: 200px"></Input>
      </p>  
      <div slot="footer">
        <Button type="primary" size="large" @click="qdgz">确定</Button>
      </div>  
    </Modal>

    <Modal v-model="xzgz" title="新增">
      <p class="zss_bjp">
        规则名称：
        <Input v-model="xinzengvalueinput" autofocus style="width: 200px"></Input>
      </p> 
      <p class="zss_bjp">
        扣除分数：
        <input class="zss_numberinput" v-model="xinzengfsvalue" style="width: 200px" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></input>
      </p>
      <p class="zss_bjp">
        <p style="text-indent:9.5em;display:inline-block">备注：</p>
        <Input v-model="xinzengbjbz" type="textarea" :autosize="{minRows: 2,maxRows: 10}" placeholder="请输入..." style="width: 200px"></Input>
      </p>  
      <div slot="footer">
        <Button type="primary" size="large" @click="qdxz">确定</Button>
      </div>  
    </Modal>
  </div>
</template>

<script>
  import ZssHeadermenu from '../components/headerMenu'
  export default {
    data () {
      return {
        value4:'',
        bjfs:false,
        xzgz:false,
        valueinput:'',
        fsvalue:'',
        jtnr:'',
        bjbz:'',
        xinzengvalueinput:'',
        xinzengfsvalue:'',
        xinzengbjbz:'',
        spinShow: true,
        columns4: [
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          {
            title: '规则名称',
            key: 'content'
          },
          {
            title: '扣除分数',
            key: 'value'
          },
          {
            title: '具体内容',
            key: 'content'
          },
          {
            title: '备注',
            key: 'note'
          },
          {
            title: '操作',
            width: 150,
            key: 'cz',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.row)
                    }
                  }
                }, '编辑'),

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        guize:[]
      }
    },
    methods:{
      // 数据获取开始
      dataLode () {
        let that = this
        that.axios.get("/gleenSoft-base/credit/rule/listNoPage",{params:{
          // 搜索参数开始
          content: that.value4,
          type:'MANUAL'
          // 搜索参数结束
        }}).then(
          (response) => {
            that.guize = response.data.result
            that.spinShow = false
          }
        )
      },
      // 数据获取结束

      // 搜索开始
      sousuo () {
        let that = this
        that.dataLode ()
      },
      // 搜索结束

      show (row) {
        let that = this
        that.bjfs=true
        that.valueinput=row.content
        that.fsvalue=row.value
        that.jtnr=row.content
        that.bjbz=row.note
        that.id=row.id
      },

      //新增开始
      xinzeng(){
        this.xzgz=true
        this.xinzengvalueinput=''
        this.xinzengfsvalue=''
        this.xinzengbjbz=''
      },
      qdxz(content,value,note){
        let that = this
        if(that.xinzengvalueinput && that.xinzengfsvalue !==''){
          that.axios.post("/gleenSoft-base/credit/rule/save",{
            content:that.xinzengvalueinput,
            value:that.xinzengfsvalue,
            note:that.xinzengbjbz
          }).then(
            (response) => {
              that.xzgz = false
              that.$Message.success('新增成功')
              that.dataLode ()
            }
          )
        }
      },
      //新增结束

      //编辑保存post后台开始
      qdgz (id,content,value,note){
        let that = this
        if(that.valueinput && that.fsvalue !== ''){
          that.axios.post("/gleenSoft-base/credit/rule/update",{
            id:that.id,
            content:that.valueinput,
            value:that.fsvalue,
            note:that.bjbz
          }).then(
            (response) => {
              that.bjfs = false
              that.$Message.success('编辑成功')
              that.dataLode ()
            }
          )
        }
      },
      remove (index) {
        let that = this
        that.axios.delete("/gleenSoft-base/credit/rule/del",{params:{
          id:that.guize[index].id
        }}).then(
          (response) => {
            that.guize.splice(index, 1)
            that.$Message.success('删除成功')
          }
        )
        
      },
      //编辑保存post后台结束
      
      zssrowclass (row,index){
        if (index %2 != 1) {
          return 'demo-table-info-row'
        }
      }
    },
    mounted () {
      this.dataLode()
    },
    components:{
      ZssHeadermenu
    }
  }
</script>


<style scode>
.zss_p{padding: 8px;border-left: 5px solid #495060;display: inline;}
.zss_guize .ivu-table .demo-table-info-row td{
    background-color:#EEFAFF;
}
.zss_bjp{text-align: center;padding:5px 0;}
.zss_numberinput{
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 7px;
    font-size: 12px;
    border: 1px solid #dddee1;
    border-radius: 4px;
    color: #495060;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
}
.zss_numberinput:hover {
    border-color: #57a3f3;
    }
.zss_numberinput:focus{border-color: #57a3f3;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(45,140,240,.2);}
</style>
